<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Sending forms with pure AJAX &ndash; MDN</title>
    <script src="../js/upload.js" type="text/javascript"></script>
</head>
<body>

<h1>Sending forms with pure AJAX</h1>

<h2>Using the GET method</h2>

<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
    <fieldset>
        <legend>Registration example</legend>
        <p>
            First name: <input type="text" name="firstname" /><br />
            Last name: <input type="text" name="lastname" />
        </p>
        <p>
            <input type="submit" value="Submit" />
        </p>
    </fieldset>
</form>

<h2>Using the POST method</h2>
<h3>Enctype: application/x-www-form-urlencoded (default)</h3>

<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
    <fieldset>
        <legend>Registration example</legend>
        <p>
            First name: <input type="text" name="firstname" /><br />
            Last name: <input type="text" name="lastname" />
        </p>
        <p>
            <input type="submit" value="Submit" />
        </p>
    </fieldset>
</form>

<h3>Enctype: text/plain</h3>

<form action="register.php" method="post" enctype="text/plain"
      onsubmit="AJAXSubmit(this); return false;">
    <fieldset>
        <legend>Registration example</legend>
        <p>
            Your name: <input type="text" name="user" />
        </p>
        <p>
            Your message:<br />
            <textarea name="message" cols="40" rows="8"></textarea>
        </p>
        <p>
            <input type="submit" value="Submit" />
        </p>
    </fieldset>
</form>

<h3>Enctype: multipart/form-data</h3>

<form action="register.php" method="post" enctype="multipart/form-data"
      onsubmit="AJAXSubmit(this); return false;">
    <fieldset>
        <legend>Upload example</legend>
        <p>
            First name: <input type="text" name="firstname" /><br />
            Last name: <input type="text" name="lastname" /><br />
            Sex:
            <input id="sex_male" type="radio" name="sex" value="male" />
            <label for="sex_male">Male</label>
            <input id="sex_female" type="radio" name="sex" value="female" />
            <label for="sex_female">Female</label><br />
            Password: <input type="password" name="secret" /><br />
            What do you prefer:
            <select name="image_type">
                <option>Books</option>
                <option>Cinema</option>
                <option>TV</option>
            </select>
        </p>
        <p>
            Post your photos:
            <input type="file" multiple name="photos[]">
        </p>
        <p>
            <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" />
            <label for="vehicle_bike">I have a bike</label><br />
            <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" />
            <label for="vehicle_car">I have a car</label>
        </p>
        <p>
            Describe yourself:<br />
            <textarea name="description" cols="50" rows="8"></textarea>
        </p>
        <p>
            <input type="submit" value="Submit" />
        </p>
    </fieldset>
</form>

</body>
</html>